<template>
  <div class="content">
    <div>
      <img src="@/assets/images/policy/policy-top.jpg" width="100%">
    </div>
    <div v-if="type === 1" class="position-search-content">
      <div class="input-block">
        <input v-model="keyword" type="text" placeholder="请输入关键字"/>
        <div class="btn2 search-btn" @click="getNewsList()">搜索</div>
      </div>
      <div class="hot-block">
        相关搜索：
        <div @click="keyword=item" v-for="(item,index) in hot" class="hot-item">{{ item }}</div>
      </div>
    </div>
    <div v-if="zcType == 2" class="btn2 content-title">
      根据您的情况,为您匹配到以下政策。
    </div>
    <div class="block search-content-in">
    <div class="content-menu">
      <div class="btn2 menu-title">政策补贴</div>
      <div class="menu-list">
        <div v-if="zcType == 1" :class="policyTabActive===0?'menu-list-content-check':''" class="menu-list-content" @click="policyTabActive=0">全部政策
          <i v-if="policyTabActive===0" class="el-icon-caret-right" style="float: right; color: #FE7725;"></i>
        </div>
        <div v-for="(item,index) in menuList">
        <div :class="policyTabActive===item.id?'menu-list-content-check':''" class="menu-list-content" @click="policyTabActive=item.id">{{item.title}}
          <span :class="policyTabActive===item.id?'menu-list-content-check':''" class="menu-list-content" v-if="type !== 1&&item.count>0">({{item.count}})</span>
          <i v-if="policyTabActive===item.id" class="el-icon-caret-right" style="float: right; color: #FE7725;"></i>
        </div>
        </div>
      </div>
    </div>
      <div class="list-content">
        <div class="list-content-title">
          全部政策
        </div>
        <div v-if="newsList.length>0">
          <div v-for="(item,index) in newsList" class="news-list" @click="getNewById(item.id)">
            <div class="news-list-title">{{item.title}}</div>
            <div class="news-list-time">{{item.crt_time}}</div>
          </div>
        </div>
        <el-empty v-else></el-empty>
        <div v-if="newsList.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" >
          </el-pagination>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

import {getNewsListApi, getMatchingCountApi} from "@/api/userPolicyInfo";


export default {
  name: "PolicyList",
  data() {
    return {
      hot: ['人才引进', '就业创业', '公务员', '培训补贴'],
      keyword: '',
      type: 0,
      zcType: 1,
      policyTabActive: 0,
      page: 1,
      limit: 10,
      count:0,
      menuList: [
        {id: 5, count: 0, title: "经济补贴类"},
        {id: 6, count: 0, title: "住房保障类"},
        {id: 7, count: 0, title: "服务保障类"},
        {id: 8, count: 0, title: "其他"},
      ],
      newsList: [

      ]
    }
  },
  methods:{
    getNewsList(){
      getNewsListApi({zcType: this.zcType,type:this.type,page: this.page,limit: this.limit,keyword:this.keyword}).then((res)=>{
        this.newsList = res.list
        this.count = res.count
      }).catch((res)=>{
        console.log(res)
      })
    },

    getEconomicsCount()
    {
      getMatchingCountApi({type: 5}).then((res)=>{
          this.menuList[0].count = res;
      }).catch((res)=>{
        console.log(res)
      })
    },
    getHousingCount()
    {
      getMatchingCountApi({type: 6}).then((res)=>{
          this.menuList[1].count = res;
      }).catch((res)=>{
        console.log(res)
      })
    },
    getServiceCount()
    {
      getMatchingCountApi({type: 7}).then((res)=>{
        this.menuList[2].count = res;
      }).catch((res)=>{
        console.log(res)
      })
    },
    getOtherCount()
    {
      getMatchingCountApi({type: 8}).then((res)=>{
        this.menuList[3].count = res;
      }).catch((res)=>{
        console.log(res)
      })
    },
    getNewById(newsId) {
      this.$router.push({
        name: 'skillNewDetails',
        query: {
          id: newsId,
          type: 1
        }
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getNewsList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getNewsList()
    },
  },
  watch:{//监听
    policyTabActive:{
      handler(value){
        this.type = value
        this.getNewsList()
      },
      //immediate:true,//深度监听
    }
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    if(this.type==5)
    {
      this.policyTabActive = this.type
    }
    this.getNewsList();
    if(this.zcType == '2')
    {
      this.getEconomicsCount();
      this.getHousingCount();
      this.getServiceCount();
      this.getOtherCount();
    }

  }
}
</script>

<style lang="scss" scoped>
.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
  min-height: 705px;
}
.content{
   background-color: #F6F6F6;
  .content-title{
    margin: 20px 0 0 40%;
    width: 400px;
    height: 30px;
    cursor: auto;

  }
  .search-content-in {
    padding-top: 20px;
    display: flex;
    .content-menu {
      width: 260px;
      height: 360px;
      background-color: #FFFFFF;
      .menu-title{
        width: 240px;
        height: 70px;
        cursor: auto;
        border-radius: 5px;
        font-size: 30px;
        margin: 10px 0 0 10px;
        font-family: fzhzgbjt;
      }
      .menu-list{
        margin: 30px 10px 0 10px;
        .menu-list-content{
          font-size: 20px;
          padding: 11px 10px 12px 20px;
          border-bottom: 1px solid #DBDBDB;
          cursor: pointer;
        }
        .menu-list-content-check{
          color: #FE7725;
        }

      }
    }
    .list-content{
      width: 930px;
      background-color: #FFFFFF;
      margin-left: 10px;
      margin-bottom: 30px;
      border-radius: 5px;
      padding-right: 30px;
      .list-content-title{
        height: 55px;
        color: #FE7725;
        font-size: 24px;
        border-bottom: 1px solid #DBDBDB;
        margin: 30px 0 0 30px;
      }
      .news-list{
        margin: 15px 0 0 30px;
        padding-bottom: 15px;
        display: flex;
        cursor: pointer;
      .news-list-title{
        width: calc(90% - 3px);
      }
       .news-list-time{
         color: #DBDBDB;
        }
      }
    }
  }
  .position-search-content {
    width: 100%;
    margin-top: 0;
    height: 150px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .input-block {
      width: 900px;
      height: 55px;
      box-shadow: 3px 5px 15px 0 rgb(0 0 0 / 10%);
      border-radius: 30px;
      padding: 6px 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      input {
        width: calc(100% - 110px);
        height: 100%;
        display: flex;
        align-items: center;
        background: none;
        padding: 0 20px;
        font-size: 18px;
      }

      .search-btn {
        width: 100px;
        height: 100%;
      }
    }

    .hot-block {
      width: 900px;
      display: flex;
      margin-top: 20px;
      flex-direction: row;
      color: $darkGray;
      font-size: 17px;
      padding-left: 10px;

      .hot-item {
        color: $darkGray;
        margin: 0 15px;
        cursor: pointer;
      }
    }
  }

}


</style>
